// 由于需要大量用到上下文中的方法和属性

// 所以，setup函数一定要定义为function
export default function() {
	const { $val, $ref, $watch } = $modules;
	const count = $ref(1);
	// 观察count中value属性的变化
	$watch(count, 'value', (curValue, oldValue) => {
		console.log(curValue, oldValue)
	});
	// 未提供观察属性，则对count对象整体观察
	// 同样，观察到的结果即为count的原样对象
	// 注：该观察默认为异步模式，会等待同步处理完成后，统一触发观察
	$watch(count, undefined, (curValue, oldValue) => {
		console.log(curValue, oldValue)
	});
	// 启用同步观察
	$watch(count, { isSync: true }, (curValue, oldValue) => {
		console.log(curValue, '--同步观察--', oldValue)
	});

	// $val方法构造观察对象，并调用observe方法传入回调，同样可实现观察
	// 上面的$watch，实际上是基于该处理方式的语法糖
	$val(count, 'value').observe((a, b, c) => {
		console.log(a, b, c)
	});

	this.add(
		'点击数字：',
		this.render({
			children: $val(count, 'value'),
			// 点击试试
			onClick: () => {
				++count.value;
			}
		})
	);
}